<template>
  <div>
    <p>
      <vxe-avatar content="X"></vxe-avatar>
      <vxe-avatar size="medium" content="X"></vxe-avatar>
      <vxe-avatar size="small" content="X"></vxe-avatar>
      <vxe-avatar size="mini" content="X"></vxe-avatar>
    </p>
    <p>
      <vxe-avatar content="X" status="primary" ></vxe-avatar>
      <vxe-avatar size="medium" status="success" content="X"></vxe-avatar>
      <vxe-avatar size="small" status="warning" content="X"></vxe-avatar>
      <vxe-avatar size="mini" status="danger" content="X"></vxe-avatar>
    </p>

    <p>
      <vxe-avatar icon="vxe-icon-user"></vxe-avatar>
      <vxe-avatar size="medium" icon="vxe-icon-user"></vxe-avatar>
      <vxe-avatar size="small" icon="vxe-icon-user"></vxe-avatar>
      <vxe-avatar size="mini" icon="vxe-icon-user"></vxe-avatar>
    </p>

    <p>
      <vxe-avatar icon="vxe-icon-user" status="primary"></vxe-avatar>
      <vxe-avatar size="medium" icon="vxe-icon-user" status="success"></vxe-avatar>
      <vxe-avatar size="small" icon="vxe-icon-user" status="info"></vxe-avatar>
      <vxe-avatar size="mini" icon="vxe-icon-user" status="warning"></vxe-avatar>
      <vxe-avatar size="mini" icon="vxe-icon-user" status="danger"></vxe-avatar>
    </p>

    <p>
      <vxe-avatar icon="vxe-icon-user" status="primary" circle></vxe-avatar>
      <vxe-avatar size="medium" icon="vxe-icon-user" status="success" circle></vxe-avatar>
      <vxe-avatar size="small" icon="vxe-icon-user" status="info" circle></vxe-avatar>
      <vxe-avatar size="mini" icon="vxe-icon-user" status="warning" circle></vxe-avatar>
      <vxe-avatar size="mini" icon="vxe-icon-user" status="danger" circle></vxe-avatar>
    </p>

    <p>
      <vxe-avatar src="https://vxeui.com/resource/img/user-square.png"></vxe-avatar>
      <vxe-avatar size="medium" src="https://vxeui.com/resource/img/user-square.png"></vxe-avatar>
      <vxe-avatar size="small" src="https://vxeui.com/resource/img/user-square.png"></vxe-avatar>
      <vxe-avatar size="mini" src="https://vxeui.com/resource/img/user-square.png"></vxe-avatar>
    </p>

    <p>
      <vxe-avatar src="https://vxeui.com/resource/img/user-square.png" circle></vxe-avatar>
      <vxe-avatar size="medium" src="https://vxeui.com/resource/img/user-square.png" circle></vxe-avatar>
      <vxe-avatar size="small" src="https://vxeui.com/resource/img/user-square.png" circle></vxe-avatar>
      <vxe-avatar size="mini" src="https://vxeui.com/resource/img/user-square.png" circle></vxe-avatar>
    </p>

    <p>
      <vxe-avatar src="https://vxeui.com/resource/img/user-square.png" count="24" circle></vxe-avatar>
      <vxe-avatar size="medium" src="https://vxeui.com/resource/img/user-square.png" count="4" circle></vxe-avatar>
      <vxe-avatar size="small" src="https://vxeui.com/resource/img/user-square.png" count="99" circle></vxe-avatar>
      <vxe-avatar size="mini" src="https://vxeui.com/resource/img/user-square.png" count="125" circle></vxe-avatar>
    </p>

    <p>
      <vxe-avatar src="https://vxeui.com/resource/img/user-square.png" dot></vxe-avatar>
      <vxe-avatar size="mini" src="https://vxeui.com/resource/img/user-square.png" dot></vxe-avatar>
    </p>
  </div>
</template>
